<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SynapseTeam - AI协作平台</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <style>
        /* Material Design 3 设计令牌 */
        :root {
            /* 颜色系统 - 浅色模式 */
            --md-sys-color-primary: #6750A4;
            --md-sys-color-on-primary: #FFFFFF;
            --md-sys-color-primary-container: #EADDFF;
            --md-sys-color-on-primary-container: #21005D;
            --md-sys-color-secondary: #625B71;
            --md-sys-color-on-secondary: #FFFFFF;
            --md-sys-color-secondary-container: #E8DEF8;
            --md-sys-color-on-secondary-container: #1D192B;
            --md-sys-color-tertiary: #7D5260;
            --md-sys-color-error: #B3261E;
            --md-sys-color-background: #FFFBFE;
            --md-sys-color-on-background: #1C1B1F;
            --md-sys-color-surface: #FFFBFE;
            --md-sys-color-on-surface: #1C1B1F;
            --md-sys-color-surface-variant: #E7E0EC;
            --md-sys-color-on-surface-variant: #49454F;
            --md-sys-color-outline: #79747E;
            --md-sys-color-outline-variant: #CAC4D0;
            --md-sys-color-shadow: #000000;
            
            /* 字体系统 */
            --md-sys-typescale-display-large: 700 57px/64px 'Roboto';
            --md-sys-typescale-headline-large: 400 32px/40px 'Roboto';
            --md-sys-typescale-headline-medium: 400 28px/36px 'Roboto';
            --md-sys-typescale-title-large: 400 22px/28px 'Roboto';
            --md-sys-typescale-title-medium: 500 16px/24px 'Roboto';
            --md-sys-typescale-body-large: 400 16px/24px 'Roboto';
            --md-sys-typescale-body-medium: 400 14px/20px 'Roboto';
            --md-sys-typescale-label-large: 500 14px/20px 'Roboto';
            
            /* 间距系统 */
            --space-xs: 4px;
            --space-sm: 8px;
            --space-md: 16px;
            --space-lg: 24px;
            --space-xl: 32px;
            
            /* 组件尺寸 */
            --nav-rail-width: 120px;
            --chat-sidebar-width: 360px;
            --top-bar-height: 64px;
            
            /* 阴影 */
            --elevation-1: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
            --elevation-2: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
        }

        @media (prefers-color-scheme: dark) {
            :root {
                --md-sys-color-primary: #D0BCFF;
                --md-sys-color-on-primary: #381E72;
                --md-sys-color-primary-container: #4F378B;
                --md-sys-color-on-primary-container: #EADDFF;
                --md-sys-color-secondary: #CCC2DC;
                --md-sys-color-on-secondary: #332D41;
                --md-sys-color-secondary-container: #4A4458;
                --md-sys-color-on-secondary-container: #E8DEF8;
                --md-sys-color-background: #1C1B1F;
                --md-sys-color-on-background: #E6E1E5;
                --md-sys-color-surface: #1C1B1F;
                --md-sys-color-on-surface: #E6E1E5;
                --md-sys-color-surface-variant: #49454F;
                --md-sys-color-on-surface-variant: #CAC4D0;
                --md-sys-color-outline: #938F99;
                --md-sys-color-outline-variant: #49454F;
            }
        }

        /* 全局样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font: var(--md-sys-typescale-body-large);
            background-color: var(--md-sys-color-background);
            color: var(--md-sys-color-on-background);
            height: 100vh;
            overflow: hidden;
        }

        /* 主应用容器 */
        .synapse-app {
            display: flex;
            flex-direction: column;
            height: 100vh;
        }

        /* 顶部应用栏 */
        .top-app-bar {
            display: flex;
            align-items: center;
            height: var(--top-bar-height);
            padding: 0 var(--space-md);
            background-color: var(--md-sys-color-primary);
            color: var(--md-sys-color-on-primary);
            box-shadow: var(--elevation-1);
            z-index: 10;
        }

        .app-branding {
            display: flex;
            align-items: center;
            gap: var(--space-md);
        }

        .app-title {
            font: var(--md-sys-typescale-title-large);
            font-weight: 700;
        }

        .project-name {
            font: var(--md-sys-typescale-body-medium);
            opacity: 0.8;
        }

        .gantt-container {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: var(--space-xl);
            max-width: 600px;
            margin: 0 var(--space-xl);
        }

        .progress-item {
            display: flex;
            align-items: center;
            gap: var(--space-sm);
            min-width: 200px;
        }

        .progress-label {
            font: var(--md-sys-typescale-body-medium);
            white-space: nowrap;
        }

        .progress-bar {
            flex: 1;
            height: 8px;
            background-color: rgba(255, 255, 255, 0.2);
            border-radius: 4px;
            overflow: hidden;
        }

        .progress-fill {
            height: 100%;
            background-color: var(--md-sys-color-on-primary);
            border-radius: 4px;
            transition: width 0.3s ease;
        }

        .progress-percentage {
            font: var(--md-sys-typescale-label-large);
            font-variant-numeric: tabular-nums;
        }

        .top-actions {
            display: flex;
            align-items: center;
            gap: var(--space-sm);
        }

        .icon-button {
            width: 40px;
            height: 40px;
            border: none;
            border-radius: 20px;
            background: transparent;
            color: inherit;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background-color 0.2s;
        }

        .icon-button:hover {
            background-color: rgba(255, 255, 255, 0.1);
        }

        /* 主内容区域 */
        .main-content {
            display: flex;
            flex: 1;
            overflow: hidden;
        }

        /* 左侧导航栏 */
        .navigation-rail {
            width: var(--nav-rail-width);
            background-color: var(--md-sys-color-surface-variant);
            border-right: 1px solid var(--md-sys-color-outline-variant);
            display: flex;
            flex-direction: column;
            padding: var(--space-md) 0;
        }

        .role-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: var(--space-sm);
            margin: var(--space-xs) var(--space-sm);
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.2s;
            position: relative;
            text-decoration: none;
            color: var(--md-sys-color-on-surface-variant);
            min-height: 90px;
        }

        .role-item:hover {
            background-color: var(--md-sys-color-primary-container);
            color: var(--md-sys-color-on-primary-container);
        }

        .role-item.active {
            background-color: var(--md-sys-color-secondary-container);
            color: var(--md-sys-color-on-secondary-container);
        }

        .role-icon {
            font-size: 20px;
            margin-bottom: var(--space-xs);
        }

        .role-label {
            font: var(--md-sys-typescale-label-large);
            text-align: center;
            line-height: 1.2;
            margin-bottom: var(--space-xs);
            font-size: 11px;
        }

        .role-status-text {
            font-size: 9px;
            color: var(--md-sys-color-on-surface-variant);
            text-align: center;
            opacity: 0.8;
        }

        .status-indicator {
            position: absolute;
            top: 6px;
            right: 6px;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: #4CAF50;
        }

        .status-indicator.busy {
            background-color: #FF9800;
        }

        .status-indicator.offline {
            background-color: #9E9E9E;
        }

        /* 角色图标 */
        .role-avatar {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            object-fit: cover;
            margin-bottom: var(--space-xs);
        }

        /* 中央面板 */
        .central-panel {
            flex: 1;
            display: flex;
            flex-direction: column;
            background-color: var(--md-sys-color-surface);
        }

        .tab-bar {
            display: flex;
            border-bottom: 1px solid var(--md-sys-color-outline-variant);
            background-color: var(--md-sys-color-surface);
        }

        .tab {
            padding: var(--space-md) var(--space-lg);
            border: none;
            background: transparent;
            color: var(--md-sys-color-on-surface-variant);
            cursor: pointer;
            font: var(--md-sys-typescale-title-medium);
            border-bottom: 2px solid transparent;
            transition: all 0.2s;
        }

        .tab:hover {
            background-color: var(--md-sys-color-primary-container);
            color: var(--md-sys-color-on-primary-container);
        }

        .tab.active {
            color: var(--md-sys-color-primary);
            border-bottom-color: var(--md-sys-color-primary);
            background-color: var(--md-sys-color-primary-container);
        }

        .content-area {
            flex: 1;
            display: flex;
            overflow: hidden;
        }

        .tab-content {
            display: none;
            width: 100%;
        }

        .tab-content.active {
            display: flex;
        }

        /* 文件浏览器 */
        .file-explorer {
            width: 280px;
            background-color: var(--md-sys-color-surface-variant);
            border-right: 1px solid var(--md-sys-color-outline-variant);
            overflow-y: auto;
        }

        .file-tree {
            padding: var(--space-md);
        }

        .tree-item {
            display: flex;
            align-items: center;
            padding: var(--space-xs) var(--space-sm);
            cursor: pointer;
            border-radius: 8px;
            transition: background-color 0.2s;
        }

        .tree-item:hover {
            background-color: var(--md-sys-color-primary-container);
        }

        .tree-icon {
            margin-right: var(--space-sm);
            font-size: 18px;
        }

        /* 代码编辑器 */
        .code-editor {
            flex: 1;
            display: flex;
            flex-direction: column;
            background-color: var(--md-sys-color-surface);
        }

        .editor-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: var(--space-sm) var(--space-md);
            background-color: var(--md-sys-color-surface-variant);
            border-bottom: 1px solid var(--md-sys-color-outline-variant);
        }

        .file-path {
            font-family: 'JetBrains Mono', monospace;
            font: var(--md-sys-typescale-body-medium);
            color: var(--md-sys-color-on-surface-variant);
        }

        .editor-actions {
            display: flex;
            gap: var(--space-xs);
        }

        .editor-content {
            flex: 1;
            padding: var(--space-md);
            overflow: auto;
            background-color: var(--md-sys-color-surface);
        }

        .code-block {
            font-family: 'JetBrains Mono', monospace;
            font-size: 14px;
            line-height: 1.5;
            color: var(--md-sys-color-on-surface);
            white-space: pre-wrap;
        }

        /* 右侧聊天栏 */
        .chat-sidebar {
            width: var(--chat-sidebar-width);
            background-color: var(--md-sys-color-surface-variant);
            border-left: 1px solid var(--md-sys-color-outline-variant);
            display: flex;
            flex-direction: column;
        }

        .chat-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: var(--space-md);
            border-bottom: 1px solid var(--md-sys-color-outline-variant);
            background-color: var(--md-sys-color-surface);
        }

        .current-role {
            display: flex;
            align-items: center;
            gap: var(--space-md);
        }

        .current-role-icon {
            font-size: 24px;
        }

        .current-role-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
        }

        .role-name {
            font-weight: 500;
        }

        .role-status {
            font-size: 12px;
            color: var(--md-sys-color-on-surface-variant);
        }

        .chat-history {
            flex: 1;
            padding: var(--space-md);
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: var(--space-md);
        }

        .message {
            display: flex;
            gap: var(--space-sm);
            align-items: flex-start;
        }

        .message.user {
            flex-direction: row-reverse;
        }

        .message-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background-color: var(--md-sys-color-primary-container);
            color: var(--md-sys-color-on-primary-container);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .message.user .message-avatar {
            background-color: var(--md-sys-color-tertiary);
            color: var(--md-sys-color-on-primary);
        }

        .message-content {
            background-color: var(--md-sys-color-surface);
            padding: var(--space-md);
            border-radius: 18px;
            max-width: 80%;
            box-shadow: var(--elevation-1);
        }

        .message.user .message-content {
            background-color: var(--md-sys-color-primary-container);
            color: var(--md-sys-color-on-primary-container);
            border-bottom-right-radius: 4px;
        }

        .message.assistant .message-content {
            border-bottom-left-radius: 4px;
        }

        .message-text {
            font: var(--md-sys-typescale-body-medium);
            line-height: 1.4;
        }

        .message-time {
            font: var(--md-sys-typescale-body-medium);
            color: var(--md-sys-color-on-surface-variant);
            margin-top: var(--space-xs);
            text-align: right;
        }

        .chat-input-area {
            padding: var(--space-md);
            border-top: 1px solid var(--md-sys-color-outline-variant);
            background-color: var(--md-sys-color-surface);
        }

        .input-container {
            display: flex;
            align-items: flex-end;
            gap: var(--space-sm);
            background-color: var(--md-sys-color-surface-variant);
            border-radius: 24px;
            padding: var(--space-sm) var(--space-md);
        }

        .chat-input {
            flex: 1;
            border: none;
            background: transparent;
            color: var(--md-sys-color-on-surface-variant);
            font: var(--md-sys-typescale-body-medium);
            resize: none;
            outline: none;
            min-height: 24px;
            max-height: 120px;
        }

        .send-button {
            width: 36px;
            height: 36px;
            border-radius: 18px;
            background-color: var(--md-sys-color-primary);
            color: var(--md-sys-color-on-primary);
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background-color 0.2s;
        }

        .send-button:hover {
            background-color: var(--md-sys-color-primary);
            opacity: 0.9;
        }

        .send-button:disabled {
            background-color: var(--md-sys-color-outline);
            cursor: not-allowed;
        }

        .input-actions {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: var(--space-sm);
        }

        .action-buttons {
            display: flex;
            gap: var(--space-xs);
        }

        /* 状态栏 */
        .status-bar {
            height: 32px;
            background-color: var(--md-sys-color-surface-variant);
            border-top: 1px solid var(--md-sys-color-outline-variant);
            display: flex;
            align-items: center;
            padding: 0 var(--space-md);
            gap: var(--space-lg);
            font: var(--md-sys-typescale-body-medium);
            color: var(--md-sys-color-on-surface-variant);
        }

        .api-status {
            display: flex;
            align-items: center;
            gap: var(--space-xs);
        }

        .status-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: #4CAF50;
        }

        .status-dot.warning {
            background-color: #FF9800;
        }

        .status-dot.error {
            background-color: #F44336;
        }

        .status-text {
            font-size: 12px;
        }

        /* 角色图标 */
        .role-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            object-fit: cover;
            margin-bottom: var(--space-xs);
        }

        /* 响应式设计 */
        @media (max-width: 1200px) {
            .chat-sidebar {
                width: 320px;
            }
            
            .gantt-container {
                max-width: 400px;
            }
        }

        /* 动画 */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .message {
            animation: fadeIn 0.3s ease;
        }

        /* 滚动条样式 */
        ::-webkit-scrollbar {
            width: 8px;
        }

        ::-webkit-scrollbar-track {
            background: var(--md-sys-color-surface-variant);
        }

        ::-webkit-scrollbar-thumb {
            background: var(--md-sys-color-outline);
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: var(--md-sys-color-on-surface-variant);
        }
    </style>
</head>
<body>
    <div class="synapse-app">
        <!-- 顶部应用栏 -->
        <header class="top-app-bar">
            <div class="app-branding">
                <h1 class="app-title">SynapseTeam</h1>
                <span class="project-name">我的AI团队项目</span>
            </div>
            
            <div class="gantt-container">
                <div class="progress-item">
                    <span class="progress-label">UI设计</span>
                    <div class="progress-bar">
                        <div class="progress-fill" style="width: 75%"></div>
                    </div>
                    <span class="progress-percentage">75%</span>
                </div>
                <div class="progress-item">
                    <span class="progress-label">开发进度</span>
                    <div class="progress-bar">
                        <div class="progress-fill" style="width: 45%"></div>
                    </div>
                    <span class="progress-percentage">45%</span>
                </div>
            </div>
            
            <div class="top-actions">
                <button class="icon-button" title="设置">
                    <span class="material-icons">settings</span>
                </button>
                <button class="icon-button" title="帮助">
                    <span class="material-icons">help_outline</span>
                </button>
                <div class="icon-button" style="background-color: rgba(255,255,255,0.2);">
                    👤
                </div>
            </div>
        </header>

        <!-- 主内容区域 -->
        <main class="main-content">
            <!-- 左侧AI角色导航栏 -->
            <nav class="navigation-rail">
                <div class="role-item active" data-role="pm">
                    <img src="../employees/icons/项目经理形象.png" alt="项目经理" class="role-avatar" onerror="this.style.display='none'; this.nextElementSibling.style.display='block';">
                    <span class="role-icon" style="display:none;">👔</span>
                    <span class="role-label">项目经理</span>
                    <span class="role-status-text">在线</span>
                    <div class="status-indicator"></div>
                </div>
                <div class="role-item" data-role="business-pm">
                    <img src="../employees/icons/商业产品经理形象设计.png" alt="商业产品经理" class="role-avatar" onerror="this.style.display='none'; this.nextElementSibling.style.display='block';">
                    <span class="role-icon" style="display:none;">💼</span>
                    <span class="role-label">商业<br>产品经理</span>
                    <div class="status-indicator"></div>
                </div>
                <div class="role-item" data-role="software-pm">
                    <img src="../employees/icons/软件产品经理形象设计.png" alt="软件产品经理" class="role-avatar" onerror="this.style.display='none'; this.nextElementSibling.style.display='block';">
                    <span class="role-icon" style="display:none;">📱</span>
                    <span class="role-label">软件<br>产品经理</span>
                    <div class="status-indicator"></div>
                </div>
                <div class="role-item" data-role="designer">
                    <img src="../employees/icons/界面设计师形象.png" alt="界面设计师" class="role-avatar" onerror="this.style.display='none'; this.nextElementSibling.style.display='block';">
                    <span class="role-icon" style="display:none;">🎨</span>
                    <span class="role-label">界面<br>设计师</span>
                    <div class="status-indicator"></div>
                </div>
                <div class="role-item" data-role="architect">
                    <img src="../employees/icons/系统架构师形象.png" alt="系统架构师" class="role-avatar" onerror="this.style.display='none'; this.nextElementSibling.style.display='block';">
                    <span class="role-icon" style="display:none;">🏗️</span>
                    <span class="role-label">系统<br>架构师</span>
                    <div class="status-indicator"></div>
                </div>
                <div class="role-item" data-role="frontend">
                    <img src="../employees/icons/前端开发工程师形象.png" alt="前端开发工程师" class="role-avatar" onerror="this.style.display='none'; this.nextElementSibling.style.display='block';">
                    <span class="role-icon" style="display:none;">💻</span>
                    <span class="role-label">前端<br>工程师</span>
                    <div class="status-indicator busy"></div>
                </div>
                <div class="role-item" data-role="backend">
                    <img src="../employees/icons/后端开发工程师形象.png" alt="后端开发工程师" class="role-avatar" onerror="this.style.display='none'; this.nextElementSibling.style.display='block';">
                    <span class="role-icon" style="display:none;">🔧</span>
                    <span class="role-label">后端<br>工程师</span>
                    <div class="status-indicator"></div>
                </div>
                <div class="role-item" data-role="ai-engineer">
                    <img src="../employees/icons/AI工程师形象.png" alt="AI开发工程师" class="role-avatar" onerror="this.style.display='none'; this.nextElementSibling.style.display='block';">
                    <span class="role-icon" style="display:none;">🤖</span>
                    <span class="role-label">AI<br>工程师</span>
                    <div class="status-indicator"></div>
                </div>
                <div class="role-item" data-role="db-engineer">
                    <img src="../employees/icons/数据库工程帅形象设计.png" alt="数据库工程师" class="role-avatar" onerror="this.style.display='none'; this.nextElementSibling.style.display='block';">
                    <span class="role-icon" style="display:none;">�️</span>
                    <span class="role-label">数据库<br>工程师</span>
                    <div class="status-indicator"></div>
                </div>
                <div class="role-item" data-role="tester">
                    <img src="../employees/icons/界面设计师形象.png" alt="系统测试员" class="role-avatar" onerror="this.style.display='none'; this.nextElementSibling.style.display='block';">
                    <span class="role-icon" style="display:none;">🔍</span>
                    <span class="role-label">系统<br>测试员</span>
                    <div class="status-indicator offline"></div>
                </div>
                <div class="role-item" data-role="version-manager">
                    <img src="../employees/icons/版本管理员形象.png" alt="版本管理员" class="role-avatar" onerror="this.style.display='none'; this.nextElementSibling.style.display='block';">
                    <span class="role-icon" style="display:none;">📦</span>
                    <span class="role-label">版本<br>管理员</span>
                    <div class="status-indicator"></div>
                </div>
            </nav>

            <!-- 中央工作面板 -->
            <section class="central-panel">
                <!-- 标签栏 -->
                <div class="tab-bar">
                    <button class="tab active" data-tab="kanban">� 项目概要</button>
                    <button class="tab" data-tab="architecture">🏗️ 架构图</button>
                    <button class="tab" data-tab="preview">👁️ 设计预览</button>
                    <button class="tab" data-tab="files">� 项目文件</button>
                </div>
                
                <!-- 内容区域 -->
                <div class="content-area">
                    <div class="tab-content active" id="kanban">
                        <div class="project-overview" style="padding: 24px; overflow-y: auto; height: 100%;">
                            <!-- 项目状态总览 -->
                            <div class="overview-grid" style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; margin-bottom: 32px;">
                                <div class="status-card" style="background: var(--md-sys-color-surface); border: 1px solid var(--md-sys-color-outline-variant); border-radius: 12px; padding: 20px;">
                                    <h3 style="margin: 0 0 16px 0; color: var(--md-sys-color-primary); font-size: 16px;">📊 项目进度</h3>
                                    <div style="font-size: 32px; font-weight: 700; color: var(--md-sys-color-on-surface); margin-bottom: 8px;">68%</div>
                                    <div style="font-size: 14px; color: var(--md-sys-color-on-surface-variant);">总体完成度</div>
                                    <div style="width: 100%; height: 8px; background: var(--md-sys-color-surface-variant); border-radius: 4px; margin-top: 12px;">
                                        <div style="width: 68%; height: 100%; background: var(--md-sys-color-primary); border-radius: 4px;"></div>
                                    </div>
                                </div>
                                
                                <div class="status-card" style="background: var(--md-sys-color-surface); border: 1px solid var(--md-sys-color-outline-variant); border-radius: 12px; padding: 20px;">
                                    <h3 style="margin: 0 0 16px 0; color: var(--md-sys-color-primary); font-size: 16px;">👥 人力投入</h3>
                                    <div style="font-size: 32px; font-weight: 700; color: var(--md-sys-color-on-surface); margin-bottom: 8px;">11</div>
                                    <div style="font-size: 14px; color: var(--md-sys-color-on-surface-variant);">活跃团队成员</div>
                                    <div style="font-size: 12px; color: var(--md-sys-color-on-surface-variant); margin-top: 8px;">本周工时: 352h</div>
                                </div>
                                
                                <div class="status-card" style="background: var(--md-sys-color-surface); border: 1px solid var(--md-sys-color-outline-variant); border-radius: 12px; padding: 20px;">
                                    <h3 style="margin: 0 0 16px 0; color: var(--md-sys-color-primary); font-size: 16px;">🎯 下个里程碑</h3>
                                    <div style="font-size: 18px; font-weight: 500; color: var(--md-sys-color-on-surface); margin-bottom: 8px;">MVP 发布</div>
                                    <div style="font-size: 14px; color: var(--md-sys-color-on-surface-variant);">预计: 2025-08-15</div>
                                    <div style="font-size: 12px; color: var(--md-sys-color-error); margin-top: 8px;">剩余 11 天</div>
                                </div>
                            </div>

                            <!-- 关键指标 -->
                            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 32px;">
                                <!-- Bug 趋势图 -->
                                <div class="chart-card" style="background: var(--md-sys-color-surface); border: 1px solid var(--md-sys-color-outline-variant); border-radius: 12px; padding: 20px;">
                                    <h3 style="margin: 0 0 20px 0; color: var(--md-sys-color-on-surface); font-size: 16px;">🐛 Bug 趋势分析</h3>
                                    <div style="display: flex; justify-content: space-between; margin-bottom: 16px;">
                                        <div>
                                            <div style="font-size: 24px; font-weight: 700; color: var(--md-sys-color-error);">23</div>
                                            <div style="font-size: 12px; color: var(--md-sys-color-on-surface-variant);">待修复</div>
                                        </div>
                                        <div>
                                            <div style="font-size: 24px; font-weight: 700; color: var(--md-sys-color-primary);">157</div>
                                            <div style="font-size: 12px; color: var(--md-sys-color-on-surface-variant);">已解决</div>
                                        </div>
                                    </div>
                                    <!-- 简单的条形图 -->
                                    <div style="height: 120px; display: flex; align-items: end; gap: 8px; justify-content: space-between;">
                                        <div style="display: flex; flex-direction: column; align-items: center;">
                                            <div style="width: 20px; height: 45px; background: var(--md-sys-color-error); border-radius: 2px; margin-bottom: 4px;"></div>
                                            <span style="font-size: 10px;">周一</span>
                                        </div>
                                        <div style="display: flex; flex-direction: column; align-items: center;">
                                            <div style="width: 20px; height: 32px; background: var(--md-sys-color-error); border-radius: 2px; margin-bottom: 4px;"></div>
                                            <span style="font-size: 10px;">周二</span>
                                        </div>
                                        <div style="display: flex; flex-direction: column; align-items: center;">
                                            <div style="width: 20px; height: 67px; background: var(--md-sys-color-error); border-radius: 2px; margin-bottom: 4px;"></div>
                                            <span style="font-size: 10px;">周三</span>
                                        </div>
                                        <div style="display: flex; flex-direction: column; align-items: center;">
                                            <div style="width: 20px; height: 23px; background: var(--md-sys-color-primary); border-radius: 2px; margin-bottom: 4px;"></div>
                                            <span style="font-size: 10px;">周四</span>
                                        </div>
                                        <div style="display: flex; flex-direction: column; align-items: center;">
                                            <div style="width: 20px; height: 89px; background: var(--md-sys-color-primary); border-radius: 2px; margin-bottom: 4px;"></div>
                                            <span style="font-size: 10px;">周五</span>
                                        </div>
                                    </div>
                                </div>

                                <!-- 工作量分布 -->
                                <div class="chart-card" style="background: var(--md-sys-color-surface); border: 1px solid var(--md-sys-color-outline-variant); border-radius: 12px; padding: 20px;">
                                    <h3 style="margin: 0 0 20px 0; color: var(--md-sys-color-on-surface); font-size: 16px;">⏱️ 工作量分布</h3>
                                    <div style="margin-bottom: 20px;">
                                        <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
                                            <span style="font-size: 14px;">前端开发</span>
                                            <span style="font-size: 14px; font-weight: 500;">35%</span>
                                        </div>
                                        <div style="width: 100%; height: 8px; background: var(--md-sys-color-surface-variant); border-radius: 4px;">
                                            <div style="width: 35%; height: 100%; background: var(--md-sys-color-primary); border-radius: 4px;"></div>
                                        </div>
                                    </div>
                                    <div style="margin-bottom: 20px;">
                                        <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
                                            <span style="font-size: 14px;">后端开发</span>
                                            <span style="font-size: 14px; font-weight: 500;">28%</span>
                                        </div>
                                        <div style="width: 100%; height: 8px; background: var(--md-sys-color-surface-variant); border-radius: 4px;">
                                            <div style="width: 28%; height: 100%; background: var(--md-sys-color-secondary); border-radius: 4px;"></div>
                                        </div>
                                    </div>
                                    <div style="margin-bottom: 20px;">
                                        <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
                                            <span style="font-size: 14px;">UI设计</span>
                                            <span style="font-size: 14px; font-weight: 500;">22%</span>
                                        </div>
                                        <div style="width: 100%; height: 8px; background: var(--md-sys-color-surface-variant); border-radius: 4px;">
                                            <div style="width: 22%; height: 100%; background: var(--md-sys-color-tertiary); border-radius: 4px;"></div>
                                        </div>
                                    </div>
                                    <div>
                                        <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
                                            <span style="font-size: 14px;">测试</span>
                                            <span style="font-size: 14px; font-weight: 500;">15%</span>
                                        </div>
                                        <div style="width: 100%; height: 8px; background: var(--md-sys-color-surface-variant); border-radius: 4px;">
                                            <div style="width: 15%; height: 100%; background: #4CAF50; border-radius: 4px;"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 任务看板 -->
                            <div class="kanban-board" style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;">
                                <div class="kanban-column" style="background: var(--md-sys-color-surface); border: 1px solid var(--md-sys-color-outline-variant); border-radius: 12px; padding: 16px;">
                                    <h4 style="margin: 0 0 16px 0; color: var(--md-sys-color-on-surface); font-size: 14px; text-align: center;">📋 待办 (5)</h4>
                                    <div class="task-card" style="background: var(--md-sys-color-primary-container); padding: 12px; border-radius: 8px; margin-bottom: 12px;">
                                        <div style="font-size: 14px; font-weight: 500; margin-bottom: 4px;">用户登录功能</div>
                                        <div style="font-size: 12px; color: var(--md-sys-color-on-surface-variant);">前端开发</div>
                                        <div style="font-size: 11px; color: var(--md-sys-color-on-surface-variant); margin-top: 8px;">预计: 2天</div>
                                    </div>
                                    <div class="task-card" style="background: var(--md-sys-color-secondary-container); padding: 12px; border-radius: 8px; margin-bottom: 12px;">
                                        <div style="font-size: 14px; font-weight: 500; margin-bottom: 4px;">数据库设计</div>
                                        <div style="font-size: 12px; color: var(--md-sys-color-on-surface-variant);">后端开发</div>
                                        <div style="font-size: 11px; color: var(--md-sys-color-on-surface-variant); margin-top: 8px;">预计: 3天</div>
                                    </div>
                                </div>
                                
                                <div class="kanban-column" style="background: var(--md-sys-color-surface); border: 1px solid var(--md-sys-color-outline-variant); border-radius: 12px; padding: 16px;">
                                    <h4 style="margin: 0 0 16px 0; color: var(--md-sys-color-on-surface); font-size: 14px; text-align: center;">🔄 进行中 (7)</h4>
                                    <div class="task-card" style="background: #FFF3E0; padding: 12px; border-radius: 8px; margin-bottom: 12px;">
                                        <div style="font-size: 14px; font-weight: 500; margin-bottom: 4px;">API接口开发</div>
                                        <div style="font-size: 12px; color: var(--md-sys-color-on-surface-variant);">后端工程师</div>
                                        <div style="width: 100%; height: 4px; background: var(--md-sys-color-surface-variant); border-radius: 2px; margin: 8px 0;">
                                            <div style="width: 60%; height: 100%; background: #FF9800; border-radius: 2px;"></div>
                                        </div>
                                        <div style="font-size: 11px; color: var(--md-sys-color-on-surface-variant);">60% 完成</div>
                                    </div>
                                    <div class="task-card" style="background: #E8F5E8; padding: 12px; border-radius: 8px; margin-bottom: 12px;">
                                        <div style="font-size: 14px; font-weight: 500; margin-bottom: 4px;">界面原型设计</div>
                                        <div style="font-size: 12px; color: var(--md-sys-color-on-surface-variant);">UI设计师</div>
                                        <div style="width: 100%; height: 4px; background: var(--md-sys-color-surface-variant); border-radius: 2px; margin: 8px 0;">
                                            <div style="width: 85%; height: 100%; background: #4CAF50; border-radius: 2px;"></div>
                                        </div>
                                        <div style="font-size: 11px; color: var(--md-sys-color-on-surface-variant);">85% 完成</div>
                                    </div>
                                </div>
                                
                                <div class="kanban-column" style="background: var(--md-sys-color-surface); border: 1px solid var(--md-sys-color-outline-variant); border-radius: 12px; padding: 16px;">
                                    <h4 style="margin: 0 0 16px 0; color: var(--md-sys-color-on-surface); font-size: 14px; text-align: center;">🔍 测试中 (3)</h4>
                                    <div class="task-card" style="background: #F3E5F5; padding: 12px; border-radius: 8px; margin-bottom: 12px;">
                                        <div style="font-size: 14px; font-weight: 500; margin-bottom: 4px;">登录模块测试</div>
                                        <div style="font-size: 12px; color: var(--md-sys-color-on-surface-variant);">测试工程师</div>
                                        <div style="font-size: 11px; color: var(--md-sys-color-on-surface-variant); margin-top: 8px;">bug: 2个</div>
                                    </div>
                                </div>
                                
                                <div class="kanban-column" style="background: var(--md-sys-color-surface); border: 1px solid var(--md-sys-color-outline-variant); border-radius: 12px; padding: 16px;">
                                    <h4 style="margin: 0 0 16px 0; color: var(--md-sys-color-on-surface); font-size: 14px; text-align: center;">✅ 已完成 (23)</h4>
                                    <div class="task-card" style="background: #E8F5E8; padding: 12px; border-radius: 8px; margin-bottom: 12px;">
                                        <div style="font-size: 14px; font-weight: 500; margin-bottom: 4px;">项目架构设计</div>
                                        <div style="font-size: 12px; color: var(--md-sys-color-on-surface-variant);">系统架构师</div>
                                        <div style="font-size: 11px; color: #4CAF50; margin-top: 8px;">✓ 已验收</div>
                                    </div>
                                    <div class="task-card" style="background: #E8F5E8; padding: 12px; border-radius: 8px; margin-bottom: 12px;">
                                        <div style="font-size: 14px; font-weight: 500; margin-bottom: 4px;">技术栈选型</div>
                                        <div style="font-size: 12px; color: var(--md-sys-color-on-surface-variant);">技术负责人</div>
                                        <div style="font-size: 11px; color: #4CAF50; margin-top: 8px;">✓ 已验收</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="tab-content" id="architecture">
                        <div style="padding: 24px; overflow-y: auto; height: 100%;">
                            <div style="margin-bottom: 24px;">
                                <h2 style="margin: 0 0 8px 0; color: var(--md-sys-color-on-surface); font-size: 24px;">🏗️ SynapseTeam 系统架构</h2>
                                <p style="margin: 0; color: var(--md-sys-color-on-surface-variant); font-size: 14px;">基于微服务架构的AI协作平台技术架构图</p>
                            </div>
                            
                            <!-- 架构图容器 -->
                            <div style="background: var(--md-sys-color-surface); border: 1px solid var(--md-sys-color-outline-variant); border-radius: 12px; padding: 24px; margin-bottom: 24px;">
                                <svg width="100%" height="600" viewBox="0 0 1000 600" style="border-radius: 8px;">
                                    <!-- 背景网格 -->
                                    <defs>
                                        <pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse">
                                            <path d="M 20 0 L 0 0 0 20" fill="none" stroke="var(--md-sys-color-outline-variant)" stroke-width="0.5" opacity="0.3"/>
                                        </pattern>
                                    </defs>
                                    <rect width="100%" height="100%" fill="url(#grid)" />
                                    
                                    <!-- 用户层 -->
                                    <g>
                                        <rect x="50" y="50" width="900" height="80" fill="#E3F2FD" stroke="#1976D2" stroke-width="2" rx="8"/>
                                        <text x="500" y="75" text-anchor="middle" font-size="16" font-weight="bold" fill="#1976D2">用户接入层 (User Access Layer)</text>
                                        
                                        <rect x="80" y="95" width="120" height="25" fill="#BBDEFB" stroke="#1565C0" rx="4"/>
                                        <text x="140" y="112" text-anchor="middle" font-size="12" fill="#0D47A1">Web 前端</text>
                                        
                                        <rect x="220" y="95" width="120" height="25" fill="#BBDEFB" stroke="#1565C0" rx="4"/>
                                        <text x="280" y="112" text-anchor="middle" font-size="12" fill="#0D47A1">移动端 App</text>
                                        
                                        <rect x="360" y="95" width="120" height="25" fill="#BBDEFB" stroke="#1565C0" rx="4"/>
                                        <text x="420" y="112" text-anchor="middle" font-size="12" fill="#0D47A1">API 接口</text>
                                        
                                        <rect x="500" y="95" width="120" height="25" fill="#BBDEFB" stroke="#1565C0" rx="4"/>
                                        <text x="560" y="112" text-anchor="middle" font-size="12" fill="#0D47A1">VS Code 插件</text>
                                    </g>
                                    
                                    <!-- API 网关 -->
                                    <g>
                                        <rect x="350" y="160" width="300" height="50" fill="#FFF3E0" stroke="#F57C00" stroke-width="2" rx="8"/>
                                        <text x="500" y="190" text-anchor="middle" font-size="16" font-weight="bold" fill="#E65100">API 网关 & 负载均衡</text>
                                    </g>
                                    
                                    <!-- 微服务层 -->
                                    <g>
                                        <rect x="50" y="240" width="900" height="200" fill="#F3E5F5" stroke="#7B1FA2" stroke-width="2" rx="8"/>
                                        <text x="500" y="265" text-anchor="middle" font-size="16" font-weight="bold" fill="#4A148C">微服务层 (Microservices)</text>
                                        
                                        <!-- 用户服务 -->
                                        <rect x="80" y="280" width="100" height="60" fill="#E1BEE7" stroke="#8E24AA" rx="6"/>
                                        <text x="130" y="300" text-anchor="middle" font-size="11" font-weight="bold" fill="#4A148C">用户服务</text>
                                        <text x="130" y="315" text-anchor="middle" font-size="10" fill="#6A1B9A">认证授权</text>
                                        <text x="130" y="328" text-anchor="middle" font-size="10" fill="#6A1B9A">用户管理</text>
                                        
                                        <!-- 项目服务 -->
                                        <rect x="200" y="280" width="100" height="60" fill="#E1BEE7" stroke="#8E24AA" rx="6"/>
                                        <text x="250" y="300" text-anchor="middle" font-size="11" font-weight="bold" fill="#4A148C">项目服务</text>
                                        <text x="250" y="315" text-anchor="middle" font-size="10" fill="#6A1B9A">项目管理</text>
                                        <text x="250" y="328" text-anchor="middle" font-size="10" fill="#6A1B9A">任务分配</text>
                                        
                                        <!-- AI 引擎服务 -->
                                        <rect x="320" y="280" width="100" height="60" fill="#E1BEE7" stroke="#8E24AA" rx="6"/>
                                        <text x="370" y="300" text-anchor="middle" font-size="11" font-weight="bold" fill="#4A148C">AI 引擎</text>
                                        <text x="370" y="315" text-anchor="middle" font-size="10" fill="#6A1B9A">模型管理</text>
                                        <text x="370" y="328" text-anchor="middle" font-size="10" fill="#6A1B9A">推理服务</text>
                                        
                                        <!-- 协作服务 -->
                                        <rect x="440" y="280" width="100" height="60" fill="#E1BEE7" stroke="#8E24AA" rx="6"/>
                                        <text x="490" y="300" text-anchor="middle" font-size="11" font-weight="bold" fill="#4A148C">协作服务</text>
                                        <text x="490" y="315" text-anchor="middle" font-size="10" fill="#6A1B9A">实时通信</text>
                                        <text x="490" y="328" text-anchor="middle" font-size="10" fill="#6A1B9A">文件共享</text>
                                        
                                        <!-- 代码服务 -->
                                        <rect x="560" y="280" width="100" height="60" fill="#E1BEE7" stroke="#8E24AA" rx="6"/>
                                        <text x="610" y="300" text-anchor="middle" font-size="11" font-weight="bold" fill="#4A148C">代码服务</text>
                                        <text x="610" y="315" text-anchor="middle" font-size="10" fill="#6A1B9A">版本控制</text>
                                        <text x="610" y="328" text-anchor="middle" font-size="10" fill="#6A1B9A">代码分析</text>
                                        
                                        <!-- 通知服务 -->
                                        <rect x="680" y="280" width="100" height="60" fill="#E1BEE7" stroke="#8E24AA" rx="6"/>
                                        <text x="730" y="300" text-anchor="middle" font-size="11" font-weight="bold" fill="#4A148C">通知服务</text>
                                        <text x="730" y="315" text-anchor="middle" font-size="10" fill="#6A1B9A">消息推送</text>
                                        <text x="730" y="328" text-anchor="middle" font-size="10" fill="#6A1B9A">邮件通知</text>
                                        
                                        <!-- 数据分析服务 -->
                                        <rect x="320" y="360" width="100" height="60" fill="#E1BEE7" stroke="#8E24AA" rx="6"/>
                                        <text x="370" y="380" text-anchor="middle" font-size="11" font-weight="bold" fill="#4A148C">数据分析</text>
                                        <text x="370" y="395" text-anchor="middle" font-size="10" fill="#6A1B9A">指标统计</text>
                                        <text x="370" y="408" text-anchor="middle" font-size="10" fill="#6A1B9A">报表生成</text>
                                        
                                        <!-- 文件服务 -->
                                        <rect x="440" y="360" width="100" height="60" fill="#E1BEE7" stroke="#8E24AA" rx="6"/>
                                        <text x="490" y="380" text-anchor="middle" font-size="11" font-weight="bold" fill="#4A148C">文件服务</text>
                                        <text x="490" y="395" text-anchor="middle" font-size="10" fill="#6A1B9A">对象存储</text>
                                        <text x="490" y="408" text-anchor="middle" font-size="10" fill="#6A1B9A">CDN 加速</text>
                                    </g>
                                    
                                    <!-- 数据层 -->
                                    <g>
                                        <rect x="50" y="470" width="900" height="80" fill="#E8F5E8" stroke="#388E3C" stroke-width="2" rx="8"/>
                                        <text x="500" y="495" text-anchor="middle" font-size="16" font-weight="bold" fill="#1B5E20">数据存储层 (Data Layer)</text>
                                        
                                        <rect x="100" y="515" width="120" height="25" fill="#C8E6C9" stroke="#4CAF50" rx="4"/>
                                        <text x="160" y="532" text-anchor="middle" font-size="12" fill="#1B5E20">PostgreSQL</text>
                                        
                                        <rect x="240" y="515" width="120" height="25" fill="#C8E6C9" stroke="#4CAF50" rx="4"/>
                                        <text x="300" y="532" text-anchor="middle" font-size="12" fill="#1B5E20">Redis 缓存</text>
                                        
                                        <rect x="380" y="515" width="120" height="25" fill="#C8E6C9" stroke="#4CAF50" rx="4"/>
                                        <text x="440" y="532" text-anchor="middle" font-size="12" fill="#1B5E20">Elasticsearch</text>
                                        
                                        <rect x="520" y="515" width="120" height="25" fill="#C8E6C9" stroke="#4CAF50" rx="4"/>
                                        <text x="580" y="532" text-anchor="middle" font-size="12" fill="#1B5E20">MinIO 存储</text>
                                        
                                        <rect x="660" y="515" width="120" height="25" fill="#C8E6C9" stroke="#4CAF50" rx="4"/>
                                        <text x="720" y="532" text-anchor="middle" font-size="12" fill="#1B5E20">监控数据库</text>
                                    </g>
                                    
                                    <!-- 连接线 -->
                                    <g stroke="#666" stroke-width="1" fill="none">
                                        <!-- 用户层到API网关 -->
                                        <path d="M 420 130 L 500 160" marker-end="url(#arrowhead)"/>
                                        <path d="M 560 130 L 500 160" marker-end="url(#arrowhead)"/>
                                        
                                        <!-- API网关到微服务 -->
                                        <path d="M 500 210 L 370 280" marker-end="url(#arrowhead)"/>
                                        <path d="M 500 210 L 490 280" marker-end="url(#arrowhead)"/>
                                        <path d="M 500 210 L 610 280" marker-end="url(#arrowhead)"/>
                                        
                                        <!-- 微服务到数据层 -->
                                        <path d="M 370 340 L 300 470" marker-end="url(#arrowhead)"/>
                                        <path d="M 490 340 L 440 470" marker-end="url(#arrowhead)"/>
                                        <path d="M 610 340 L 580 470" marker-end="url(#arrowhead)"/>
                                    </g>
                                    
                                    <!-- 箭头标记 -->
                                    <defs>
                                        <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
                                            <polygon points="0 0, 10 3.5, 0 7" fill="#666" />
                                        </marker>
                                    </defs>
                                </svg>
                            </div>
                            
                            <!-- 架构说明 -->
                            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 24px;">
                                <div style="background: var(--md-sys-color-surface); border: 1px solid var(--md-sys-color-outline-variant); border-radius: 12px; padding: 20px;">
                                    <h3 style="margin: 0 0 16px 0; color: var(--md-sys-color-primary); font-size: 16px;">🔧 技术栈</h3>
                                    <ul style="margin: 0; padding-left: 20px; color: var(--md-sys-color-on-surface); line-height: 1.6;">
                                        <li><strong>前端:</strong> React 18 + TypeScript + Vite</li>
                                        <li><strong>后端:</strong> Node.js + Express + GraphQL</li>
                                        <li><strong>数据库:</strong> PostgreSQL + Redis</li>
                                        <li><strong>AI 引擎:</strong> Python + FastAPI + Transformers</li>
                                        <li><strong>容器化:</strong> Docker + Kubernetes</li>
                                        <li><strong>监控:</strong> Prometheus + Grafana</li>
                                    </ul>
                                </div>
                                
                                <div style="background: var(--md-sys-color-surface); border: 1px solid var(--md-sys-color-outline-variant); border-radius: 12px; padding: 20px;">
                                    <h3 style="margin: 0 0 16px 0; color: var(--md-sys-color-primary); font-size: 16px;">🎯 架构特点</h3>
                                    <ul style="margin: 0; padding-left: 20px; color: var(--md-sys-color-on-surface); line-height: 1.6;">
                                        <li><strong>微服务架构:</strong> 松耦合，易扩展</li>
                                        <li><strong>高可用:</strong> 负载均衡，故障隔离</li>
                                        <li><strong>安全性:</strong> JWT认证，RBAC权限</li>
                                        <li><strong>性能:</strong> Redis缓存，CDN加速</li>
                                        <li><strong>监控:</strong> 实时监控，链路追踪</li>
                                        <li><strong>扩展性:</strong> 水平扩展，弹性伸缩</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="tab-content" id="preview">
                        <div style="padding: 24px; overflow-y: auto; height: 100%;">
                            <div style="margin-bottom: 24px;">
                                <h2 style="margin: 0 0 8px 0; color: var(--md-sys-color-on-surface); font-size: 24px;">👁️ UI设计预览</h2>
                                <p style="margin: 0; color: var(--md-sys-color-on-surface-variant); font-size: 14px;">SynapseTeam 界面设计线框图和交互原型</p>
                            </div>
                            
                            <!-- 设计切换控制 -->
                            <div style="display: flex; gap: 12px; margin-bottom: 24px;">
                                <button style="padding: 8px 16px; border: 1px solid var(--md-sys-color-primary); background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); border-radius: 20px; font-size: 14px; cursor: pointer;">线框图</button>
                                <button style="padding: 8px 16px; border: 1px solid var(--md-sys-color-outline); background: transparent; color: var(--md-sys-color-on-surface); border-radius: 20px; font-size: 14px; cursor: pointer;">高保真原型</button>
                                <button style="padding: 8px 16px; border: 1px solid var(--md-sys-color-outline); background: transparent; color: var(--md-sys-color-on-surface); border-radius: 20px; font-size: 14px; cursor: pointer;">移动端适配</button>
                            </div>
                            
                            <!-- 线框图容器 -->
                            <div style="background: var(--md-sys-color-surface); border: 1px solid var(--md-sys-color-outline-variant); border-radius: 12px; padding: 24px; margin-bottom: 24px;">
                                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
                                    <h3 style="margin: 0; color: var(--md-sys-color-on-surface); font-size: 18px;">主界面线框图</h3>
                                    <div style="display: flex; gap: 8px;">
                                        <span style="font-size: 12px; color: var(--md-sys-color-on-surface-variant);">比例: 1:1</span>
                                        <span style="font-size: 12px; color: var(--md-sys-color-on-surface-variant);">|</span>
                                        <span style="font-size: 12px; color: var(--md-sys-color-on-surface-variant);">分辨率: 1920x1080</span>
                                    </div>
                                </div>
                                
                                <!-- 线框图 SVG -->
                                <svg width="100%" height="500" viewBox="0 0 1200 700" style="border: 1px solid var(--md-sys-color-outline-variant); border-radius: 8px; background: #FAFAFA;">
                                    <!-- 顶部导航栏 -->
                                    <rect x="0" y="0" width="1200" height="60" fill="none" stroke="#999" stroke-width="2"/>
                                    <text x="20" y="35" font-size="14" font-weight="bold" fill="#333">SynapseTeam</text>
                                    <rect x="1100" y="15" width="80" height="30" fill="none" stroke="#999" stroke-width="1" rx="4"/>
                                    <text x="1140" y="33" text-anchor="middle" font-size="12" fill="#666">用户头像</text>
                                    
                                    <!-- 进度条区域 -->
                                    <rect x="300" y="20" width="600" height="20" fill="none" stroke="#999" stroke-width="1" rx="2"/>
                                    <rect x="305" y="23" width="300" height="14" fill="#E0E0E0" rx="1"/>
                                    <text x="600" y="35" text-anchor="middle" font-size="10" fill="#666">项目整体进度</text>
                                    
                                    <!-- 左侧AI角色导航 -->
                                    <rect x="0" y="60" width="120" height="640" fill="none" stroke="#999" stroke-width="2"/>
                                    <text x="60" y="85" text-anchor="middle" font-size="12" font-weight="bold" fill="#333">AI 团队</text>
                                    
                                    <!-- AI角色项目 -->
                                    <g>
                                        <rect x="10" y="100" width="100" height="50" fill="#F5F5F5" stroke="#CCC" stroke-width="1" rx="4"/>
                                        <circle cx="35" cy="120" r="12" fill="none" stroke="#999" stroke-width="1"/>
                                        <text x="55" y="118" font-size="10" fill="#333">项目经理</text>
                                        <text x="55" y="130" font-size="8" fill="#666">在线</text>
                                        <circle cx="95" cy="110" r="3" fill="#4CAF50"/>
                                    </g>
                                    
                                    <g>
                                        <rect x="10" y="160" width="100" height="50" fill="#FFF" stroke="#CCC" stroke-width="1" rx="4"/>
                                        <circle cx="35" cy="180" r="12" fill="none" stroke="#999" stroke-width="1"/>
                                        <text x="55" y="178" font-size="10" fill="#333">UI设计师</text>
                                        <text x="55" y="190" font-size="8" fill="#666">创作中</text>
                                        <circle cx="95" cy="170" r="3" fill="#FF9800"/>
                                    </g>
                                    
                                    <g>
                                        <rect x="10" y="220" width="100" height="50" fill="#FFF" stroke="#CCC" stroke-width="1" rx="4"/>
                                        <circle cx="35" cy="240" r="12" fill="none" stroke="#999" stroke-width="1"/>
                                        <text x="55" y="238" font-size="10" fill="#333">前端工程师</text>
                                        <text x="55" y="250" font-size="8" fill="#666">编码中</text>
                                        <circle cx="95" cy="230" r="3" fill="#FF9800"/>
                                    </g>
                                    
                                    <g>
                                        <rect x="10" y="280" width="100" height="50" fill="#FFF" stroke="#CCC" stroke-width="1" rx="4"/>
                                        <circle cx="35" cy="300" r="12" fill="none" stroke="#999" stroke-width="1"/>
                                        <text x="55" y="298" font-size="10" fill="#333">后端工程师</text>
                                        <text x="55" y="310" font-size="8" fill="#666">开发API</text>
                                        <circle cx="95" cy="290" r="3" fill="#4CAF50"/>
                                    </g>
                                    
                                    <!-- 中央内容区域 -->
                                    <rect x="120" y="60" width="720" height="640" fill="none" stroke="#999" stroke-width="2"/>
                                    
                                    <!-- 标签栏 -->
                                    <rect x="120" y="60" width="720" height="40" fill="none" stroke="#999" stroke-width="1"/>
                                    <rect x="130" y="70" width="80" height="20" fill="#E3F2FD" stroke="#1976D2" stroke-width="1" rx="2"/>
                                    <text x="170" y="83" text-anchor="middle" font-size="10" fill="#1976D2">项目概要</text>
                                    <rect x="220" y="70" width="60" height="20" fill="none" stroke="#CCC" stroke-width="1" rx="2"/>
                                    <text x="250" y="83" text-anchor="middle" font-size="10" fill="#666">架构图</text>
                                    <rect x="290" y="70" width="70" height="20" fill="none" stroke="#CCC" stroke-width="1" rx="2"/>
                                    <text x="325" y="83" text-anchor="middle" font-size="10" fill="#666">设计预览</text>
                                    <rect x="370" y="70" width="70" height="20" fill="none" stroke="#CCC" stroke-width="1" rx="2"/>
                                    <text x="405" y="83" text-anchor="middle" font-size="10" fill="#666">项目文件</text>
                                    
                                    <!-- 项目概要内容区域 -->
                                    <rect x="140" y="120" width="680" height="560" fill="#FAFAFA" stroke="#DDD" stroke-width="1"/>
                                    
                                    <!-- 项目状态卡片 -->
                                    <rect x="160" y="140" width="200" height="100" fill="#FFF" stroke="#E0E0E0" stroke-width="1" rx="4"/>
                                    <text x="170" y="160" font-size="12" font-weight="bold" fill="#333">项目进度</text>
                                    <text x="170" y="180" font-size="24" font-weight="bold" fill="#1976D2">68%</text>
                                    <rect x="170" y="200" width="180" height="8" fill="#E0E0E0" rx="4"/>
                                    <rect x="170" y="200" width="120" height="8" fill="#1976D2" rx="4"/>
                                    <text x="170" y="225" font-size="10" fill="#666">总体完成度</text>
                                    
                                    <rect x="380" y="140" width="200" height="100" fill="#FFF" stroke="#E0E0E0" stroke-width="1" rx="4"/>
                                    <text x="390" y="160" font-size="12" font-weight="bold" fill="#333">团队状态</text>
                                    <text x="390" y="180" font-size="24" font-weight="bold" fill="#4CAF50">11</text>
                                    <text x="390" y="200" font-size="10" fill="#666">活跃成员</text>
                                    <text x="390" y="215" font-size="10" fill="#666">本周工时: 352h</text>
                                    
                                    <rect x="600" y="140" width="200" height="100" fill="#FFF" stroke="#E0E0E0" stroke-width="1" rx="4"/>
                                    <text x="610" y="160" font-size="12" font-weight="bold" fill="#333">下个里程碑</text>
                                    <text x="610" y="180" font-size="16" font-weight="bold" fill="#FF9800">MVP 发布</text>
                                    <text x="610" y="200" font-size="10" fill="#666">预计: 2025-08-15</text>
                                    <text x="610" y="215" font-size="10" fill="#F44336">剩余 11 天</text>
                                    
                                    <!-- 看板区域 -->
                                    <rect x="160" y="260" width="640" height="400" fill="#FFF" stroke="#E0E0E0" stroke-width="1" rx="4"/>
                                    <text x="170" y="285" font-size="14" font-weight="bold" fill="#333">任务看板</text>
                                    
                                    <!-- 看板列 -->
                                    <rect x="180" y="300" width="140" height="340" fill="#F8F9FA" stroke="#DDD" stroke-width="1" rx="4"/>
                                    <text x="250" y="320" text-anchor="middle" font-size="12" font-weight="bold" fill="#333">待办 (5)</text>
                                    <rect x="190" y="330" width="120" height="60" fill="#FFF" stroke="#E0E0E0" stroke-width="1" rx="4"/>
                                    <text x="195" y="350" font-size="10" font-weight="bold" fill="#333">用户登录功能</text>
                                    <text x="195" y="365" font-size="9" fill="#666">前端开发</text>
                                    <text x="195" y="380" font-size="9" fill="#666">预计: 2天</text>
                                    
                                    <rect x="340" y="300" width="140" height="340" fill="#FFF8E1" stroke="#DDD" stroke-width="1" rx="4"/>
                                    <text x="410" y="320" text-anchor="middle" font-size="12" font-weight="bold" fill="#333">进行中 (7)</text>
                                    <rect x="350" y="330" width="120" height="80" fill="#FFF" stroke="#E0E0E0" stroke-width="1" rx="4"/>
                                    <text x="355" y="350" font-size="10" font-weight="bold" fill="#333">API接口开发</text>
                                    <text x="355" y="365" font-size="9" fill="#666">后端工程师</text>
                                    <rect x="355" y="375" width="110" height="4" fill="#E0E0E0" rx="2"/>
                                    <rect x="355" y="375" width="66" height="4" fill="#FF9800" rx="2"/>
                                    <text x="355" y="395" font-size="9" fill="#666">60% 完成</text>
                                    
                                    <rect x="500" y="300" width="140" height="340" fill="#F3E5F5" stroke="#DDD" stroke-width="1" rx="4"/>
                                    <text x="570" y="320" text-anchor="middle" font-size="12" font-weight="bold" fill="#333">测试中 (3)</text>
                                    <rect x="510" y="330" width="120" height="60" fill="#FFF" stroke="#E0E0E0" stroke-width="1" rx="4"/>
                                    <text x="515" y="350" font-size="10" font-weight="bold" fill="#333">登录模块测试</text>
                                    <text x="515" y="365" font-size="9" fill="#666">测试工程师</text>
                                    <text x="515" y="380" font-size="9" fill="#F44336">发现 2 个 bug</text>
                                    
                                    <rect x="660" y="300" width="140" height="340" fill="#E8F5E8" stroke="#DDD" stroke-width="1" rx="4"/>
                                    <text x="730" y="320" text-anchor="middle" font-size="12" font-weight="bold" fill="#333">已完成 (23)</text>
                                    <rect x="670" y="330" width="120" height="60" fill="#FFF" stroke="#E0E0E0" stroke-width="1" rx="4"/>
                                    <text x="675" y="350" font-size="10" font-weight="bold" fill="#333">架构设计</text>
                                    <text x="675" y="365" font-size="9" fill="#666">系统架构师</text>
                                    <text x="675" y="380" font-size="9" fill="#4CAF50">✓ 已验收</text>
                                    
                                    <!-- 右侧聊天区域 -->
                                    <rect x="840" y="60" width="360" height="640" fill="none" stroke="#999" stroke-width="2"/>
                                    
                                    <!-- 聊天头部 -->
                                    <rect x="840" y="60" width="360" height="50" fill="#F5F5F5" stroke="#CCC" stroke-width="1"/>
                                    <circle cx="870" cy="85" r="15" fill="none" stroke="#999" stroke-width="1"/>
                                    <text x="895" y="88" font-size="12" font-weight="bold" fill="#333">项目经理 AI</text>
                                    <text x="895" y="100" font-size="10" fill="#666">在线 - 准备就绪</text>
                                    
                                    <!-- 聊天消息区域 -->
                                    <rect x="850" y="120" width="340" height="500" fill="#FAFAFA" stroke="#DDD" stroke-width="1"/>
                                    <text x="860" y="140" font-size="10" fill="#666">聊天消息区域</text>
                                    
                                    <!-- 消息气泡示例 -->
                                    <rect x="860" y="150" width="250" height="40" fill="#E3F2FD" stroke="#1976D2" stroke-width="1" rx="12"/>
                                    <text x="870" y="165" font-size="9" fill="#1976D2">你好！我是项目经理AI。</text>
                                    <text x="870" y="178" font-size="9" fill="#1976D2">让我为你协调团队资源...</text>
                                    
                                    <rect x="890" y="200" width="200" height="30" fill="#FFF" stroke="#CCC" stroke-width="1" rx="12"/>
                                    <text x="900" y="215" font-size="9" fill="#333">我需要前端开发支持</text>
                                    
                                    <!-- 输入框 -->
                                    <rect x="850" y="640" width="340" height="50" fill="#F5F5F5" stroke="#CCC" stroke-width="1"/>
                                    <rect x="860" y="655" width="270" height="20" fill="#FFF" stroke="#CCC" stroke-width="1" rx="10"/>
                                    <text x="870" y="668" font-size="9" fill="#999">输入消息...</text>
                                    <circle cx="1160" cy="665" r="12" fill="#1976D2"/>
                                    <text x="1160" y="670" text-anchor="middle" font-size="10" fill="#FFF">→</text>
                                </svg>
                            </div>
                            
                            <!-- 设计规范说明 -->
                            <div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px;">
                                <div style="background: var(--md-sys-color-surface); border: 1px solid var(--md-sys-color-outline-variant); border-radius: 12px; padding: 20px;">
                                    <h3 style="margin: 0 0 16px 0; color: var(--md-sys-color-primary); font-size: 16px;">🎨 设计系统</h3>
                                    <ul style="margin: 0; padding-left: 20px; color: var(--md-sys-color-on-surface); line-height: 1.6; font-size: 14px;">
                                        <li>Material Design 3 规范</li>
                                        <li>响应式栅格系统</li>
                                        <li>统一的颜色主题</li>
                                        <li>标准化组件库</li>
                                        <li>无障碍访问支持</li>
                                    </ul>
                                </div>
                                
                                <div style="background: var(--md-sys-color-surface); border: 1px solid var(--md-sys-color-outline-variant); border-radius: 12px; padding: 20px;">
                                    <h3 style="margin: 0 0 16px 0; color: var(--md-sys-color-primary); font-size: 16px;">📐 布局规范</h3>
                                    <ul style="margin: 0; padding-left: 20px; color: var(--md-sys-color-on-surface); line-height: 1.6; font-size: 14px;">
                                        <li>左侧导航: 120px</li>
                                        <li>右侧聊天: 360px</li>
                                        <li>顶部导航: 64px</li>
                                        <li>间距系统: 4px 基准</li>
                                        <li>最小触控区域: 44px</li>
                                    </ul>
                                </div>
                                
                                <div style="background: var(--md-sys-color-surface); border: 1px solid var(--md-sys-color-outline-variant); border-radius: 12px; padding: 20px;">
                                    <h3 style="margin: 0 0 16px 0; color: var(--md-sys-color-primary); font-size: 16px;">🔄 交互规范</h3>
                                    <ul style="margin: 0; padding-left: 20px; color: var(--md-sys-color-on-surface); line-height: 1.6; font-size: 14px;">
                                        <li>悬停状态反馈</li>
                                        <li>加载状态指示</li>
                                        <li>错误状态提示</li>
                                        <li>动画过渡效果</li>
                                        <li>键盘快捷支持</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="tab-content" id="files">
                        <!-- 文件浏览器 -->
                        <div class="file-explorer">
                            <div class="file-tree">
                                <div class="tree-item">
                                    <span class="material-icons tree-icon">folder</span>
                                    <span>src</span>
                                </div>
                                <div class="tree-item" style="margin-left: 20px;">
                                    <span class="material-icons tree-icon">folder</span>
                                    <span>components</span>
                                </div>
                                <div class="tree-item" style="margin-left: 40px;">
                                    <span class="material-icons tree-icon">description</span>
                                    <span>Button.jsx</span>
                                </div>
                                <div class="tree-item" style="margin-left: 40px;">
                                    <span class="material-icons tree-icon">description</span>
                                    <span>Card.jsx</span>
                                </div>
                                <div class="tree-item" style="margin-left: 20px;">
                                    <span class="material-icons tree-icon">description</span>
                                    <span>App.jsx</span>
                                </div>
                                <div class="tree-item" style="margin-left: 20px;">
                                    <span class="material-icons tree-icon">style</span>
                                    <span>index.css</span>
                                </div>
                                <div class="tree-item">
                                    <span class="material-icons tree-icon">description</span>
                                    <span>package.json</span>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 代码编辑器 -->
                        <div class="code-editor">
                            <div class="editor-header">
                                <span class="file-path">src/components/Button.jsx</span>
                                <div class="editor-actions">
                                    <button class="icon-button">
                                        <span class="material-icons">save</span>
                                    </button>
                                    <button class="icon-button">
                                        <span class="material-icons">refresh</span>
                                    </button>
                                </div>
                            </div>
                            <div class="editor-content">
                                <div class="code-block">import React from 'react';
import './Button.css';

const Button = ({ 
  children, 
  variant = 'primary', 
  size = 'medium',
  disabled = false,
  onClick,
  ...props 
}) => {
  const classNames = [
    'synapse-button',
    `synapse-button--${variant}`,
    `synapse-button--${size}`,
    disabled && 'synapse-button--disabled'
  ].filter(Boolean).join(' ');

  return (
    &lt;button
      className={classNames}
      disabled={disabled}
      onClick={onClick}
      {...props}
    &gt;
      {children}
    &lt;/button&gt;
  );
};

export default Button;</div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 右侧AI聊天栏 -->
            <aside class="chat-sidebar">
                <!-- 聊天头部 -->
                <div class="chat-header">
                    <div class="current-role">
                        <img src="../employees/icons/项目经理形象.png" alt="项目经理" class="current-role-avatar" onerror="this.style.display='none'; this.nextElementSibling.style.display='block';">
                        <span class="current-role-icon" style="display:none;">👔</span>
                        <div class="role-info">
                            <span class="role-name">项目经理 AI</span>
                            <span class="role-status">在线 - 准备就绪</span>
                        </div>
                    </div>
                    <button class="icon-button">
                        <span class="material-icons">more_vert</span>
                    </button>
                </div>
                
                <!-- 聊天历史 -->
                <div class="chat-history" id="chatHistory">
                    <div class="message assistant">
                        <div class="message-avatar">👔</div>
                        <div class="message-content">
                            <div class="message-text">你好！我是项目经理AI。我看到你想创建一个React按钮组件。让我协调团队来完成这个任务：

• UI设计师：设计按钮样式和状态
• 前端工程师：实现React组件  
• 测试工程师：编写测试用例

需要我开始分配任务吗？</div>
                            <div class="message-time">10:30</div>
                        </div>
                    </div>
                </div>
                
                <!-- 聊天输入区域 -->
                <div class="chat-input-area">
                    <div class="input-container">
                        <textarea 
                            class="chat-input" 
                            placeholder="与项目经理AI对话..."
                            rows="1"
                        ></textarea>
                        <button class="send-button" id="sendButton">
                            <span class="material-icons">send</span>
                        </button>
                    </div>
                    <div class="input-actions">
                        <div class="action-buttons">
                            <button class="icon-button" title="上传文件">
                                <span class="material-icons">attach_file</span>
                            </button>
                            <button class="icon-button" title="语音输入">
                                <span class="material-icons">mic</span>
                            </button>
                            <button class="icon-button" title="快速命令">
                                <span class="material-icons">flash_on</span>
                            </button>
                        </div>
                    </div>
                </div>
            </aside>
        </main>
        
        <!-- 状态栏 -->
        <footer class="status-bar">
            <div class="api-status">
                <div class="status-dot"></div>
                <span class="status-text">OpenAI GPT-4</span>
            </div>
            <div class="api-status">
                <div class="status-dot"></div>
                <span class="status-text">Claude-3.5</span>
            </div>
            <div class="api-status">
                <div class="status-dot warning"></div>
                <span class="status-text">Gemini Pro</span>
            </div>
            <div class="api-status">
                <div class="status-dot error"></div>
                <span class="status-text">文心一言</span>
            </div>
            <div style="margin-left: auto; display: flex; gap: 16px;">
                <span class="status-text">沙盒状态: 安全</span>
                <span class="status-text">内存使用: 2.1GB / 8GB</span>
                <span class="status-text">活跃任务: 3</span>
            </div>
        </footer>
    </div>

    <script>
        // SynapseTeam 高保真原型交互逻辑
        class SynapseTeamApp {
            constructor() {
                this.currentRole = 'pm';
                this.currentTab = 'files';
                this.init();
            }

            init() {
                this.bindEvents();
                this.setupChatInput();
            }

            bindEvents() {
                // 角色切换
                document.querySelectorAll('.role-item').forEach(item => {
                    item.addEventListener('click', () => {
                        this.switchRole(item.dataset.role);
                    });
                });

                // 标签切换
                document.querySelectorAll('.tab').forEach(tab => {
                    tab.addEventListener('click', () => {
                        this.switchTab(tab.dataset.tab);
                    });
                });

                // 发送消息
                document.getElementById('sendButton').addEventListener('click', () => {
                    this.sendMessage();
                });

                // 文件树交互
                document.querySelectorAll('.tree-item').forEach(item => {
                    item.addEventListener('click', () => {
                        this.selectFile(item);
                    });
                });
            }

            setupChatInput() {
                const chatInput = document.querySelector('.chat-input');
                
                // 自动调整高度
                chatInput.addEventListener('input', () => {
                    chatInput.style.height = 'auto';
                    chatInput.style.height = Math.min(chatInput.scrollHeight, 120) + 'px';
                });

                // 回车发送
                chatInput.addEventListener('keydown', (e) => {
                    if (e.key === 'Enter' && !e.shiftKey) {
                        e.preventDefault();
                        this.sendMessage();
                    }
                });
            }

            switchRole(roleId) {
                // 更新导航栏状态
                document.querySelectorAll('.role-item').forEach(item => {
                    item.classList.remove('active');
                });
                document.querySelector(`[data-role="${roleId}"]`).classList.add('active');

                // 更新聊天头部
                this.updateChatHeader(roleId);
                this.currentRole = roleId;

                // 添加角色切换消息
                this.addSystemMessage(`已切换到 ${this.getRoleInfo(roleId).name}`);
            }

            switchTab(tabId) {
                // 更新标签状态
                document.querySelectorAll('.tab').forEach(tab => {
                    tab.classList.remove('active');
                });
                document.querySelector(`[data-tab="${tabId}"]`).classList.add('active');

                // 更新内容区域
                document.querySelectorAll('.tab-content').forEach(content => {
                    content.classList.remove('active');
                });
                document.getElementById(tabId).classList.add('active');

                this.currentTab = tabId;
            }

            sendMessage() {
                const chatInput = document.querySelector('.chat-input');
                const message = chatInput.value.trim();
                
                if (!message) return;

                // 添加用户消息
                this.addMessage('user', message);
                chatInput.value = '';
                chatInput.style.height = 'auto';

                // 模拟AI回复
                setTimeout(() => {
                    const response = this.generateAIResponse(message);
                    this.addMessage('assistant', response);
                }, 800 + Math.random() * 1200);
            }

            addMessage(type, text) {
                const chatHistory = document.getElementById('chatHistory');
                const messageEl = document.createElement('div');
                messageEl.className = `message ${type}`;

                const roleInfo = this.getRoleInfo(this.currentRole);
                const time = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });

                if (type === 'user') {
                    messageEl.innerHTML = `
                        <div class="message-avatar">👤</div>
                        <div class="message-content">
                            <div class="message-text">${text}</div>
                            <div class="message-time">${time}</div>
                        </div>
                    `;
                } else {
                    messageEl.innerHTML = `
                        <div class="message-avatar">${roleInfo.icon}</div>
                        <div class="message-content">
                            <div class="message-text">${text}</div>
                            <div class="message-time">${time}</div>
                        </div>
                    `;
                }

                chatHistory.appendChild(messageEl);
                chatHistory.scrollTop = chatHistory.scrollHeight;
            }

            addSystemMessage(text) {
                const chatHistory = document.getElementById('chatHistory');
                const messageEl = document.createElement('div');
                messageEl.style.cssText = 'text-align: center; color: var(--md-sys-color-on-surface-variant); font-size: 12px; margin: 8px 0;';
                messageEl.textContent = text;
                chatHistory.appendChild(messageEl);
                chatHistory.scrollTop = chatHistory.scrollHeight;
            }

            generateAIResponse(userMessage) {
                const roleInfo = this.getRoleInfo(this.currentRole);
                const responses = {
                    'pm': `作为项目经理，我已经分析了你的需求"${userMessage}"。我将协调以下团队成员：

• 商业产品经理：市场需求分析
• 软件产品经理：功能需求细化  
• 系统架构师：技术架构设计
• 开发团队：功能实现
• 测试团队：质量保证

预计完成时间：2-3个工作日。需要我开始分配具体任务吗？`,

                    'business-pm': `作为商业产品经理，我会从商业角度分析"${userMessage}"：

• 市场机会评估和竞争分析
• 用户价值主张定义
• 商业模式设计
• ROI和成本效益分析
• 风险评估和缓解策略

正在生成商业需求文档(BRD)...`,

                    'software-pm': `作为软件产品经理，我将为"${userMessage}"制定产品策略：

• 用户故事和用例设计
• 功能优先级排序
• 产品路线图规划
• 用户体验流程设计
• 验收标准定义

正在编写产品需求文档(PRD)...`,

                    'designer': `作为界面设计师，我理解你的设计需求。我会为"${userMessage}"创建：

• 符合Material Design 3的视觉规范
• 用户界面线框图和原型
• 交互设计和动效规范
• 设计系统和组件库
• 响应式布局适配

正在生成设计原型，请稍候...`,

                    'architect': `作为系统架构师，我将为"${userMessage}"设计技术架构：

• 系统整体架构设计
• 技术栈选型和评估
• 数据库架构设计
• API接口规范定义
• 安全和性能架构

正在绘制系统架构图...`,

                    'frontend': `作为前端开发工程师，我收到了你的开发需求："${userMessage}"

我的技术方案：
• 使用React + TypeScript + Vite
• 集成Material-UI组件库
• 实现响应式设计和PWA
• 添加单元测试和E2E测试
• 性能优化和代码分割

开始编码实现...`,

                    'backend': `作为后端开发工程师，我分析了你的需求："${userMessage}"

我将提供：
• RESTful API和GraphQL接口设计
• 微服务架构实现
• 数据库优化和缓存策略
• 安全认证和权限控制
• 监控、日志和性能调优

正在设计API接口...`,

                    'ai-engineer': `作为AI开发工程师，我将为"${userMessage}"开发AI解决方案：

• 机器学习模型设计和训练
• 自然语言处理和理解
• 深度学习算法优化
• AI模型部署和推理
• 模型监控和持续改进

正在准备训练数据和模型...`,

                    'db-engineer': `作为数据库工程师，我将为"${userMessage}"优化数据方案：

• 数据库架构设计和建模
• 查询性能优化
• 数据备份和恢复策略
• 数据安全和权限管理
• 分布式数据库部署

正在设计数据表结构...`,

                    'tester': `作为系统测试员，我将为"${userMessage}"制定测试策略：

• 测试计划和测试用例设计
• 自动化测试脚本开发
• 性能测试和压力测试
• 安全测试和兼容性测试
• 用户验收测试(UAT)支持

开始编写测试计划...`,

                    'version-manager': `作为版本管理员，我将为"${userMessage}"管理项目版本：

• Git分支策略和工作流
• 代码审查和质量控制
• 持续集成和部署(CI/CD)
• 发布管理和版本控制
• 环境管理和配置

正在设置版本控制流程...`
                };

                return responses[this.currentRole] || `我正在处理你的请求："${userMessage}"，请稍候...`;
            }

            updateChatHeader(roleId) {
                const roleInfo = this.getRoleInfo(roleId);
                const chatHeader = document.querySelector('.chat-header');
                
                // 更新头像
                const avatar = chatHeader.querySelector('.current-role-avatar');
                const icon = chatHeader.querySelector('.current-role-icon');
                
                if (roleInfo.avatar) {
                    avatar.src = roleInfo.avatar;
                    avatar.style.display = 'block';
                    icon.style.display = 'none';
                } else {
                    avatar.style.display = 'none';
                    icon.style.display = 'block';
                    icon.textContent = roleInfo.icon;
                }
                
                // 更新文本信息
                chatHeader.querySelector('.role-name').textContent = roleInfo.name;
                chatHeader.querySelector('.role-status').textContent = roleInfo.status;
            }

            getRoleInfo(roleId) {
                const roles = {
                    'pm': { 
                        name: '项目经理 AI', 
                        icon: '👔', 
                        avatar: '../employees/icons/项目经理形象.png',
                        status: '在线 - 协调团队' 
                    },
                    'business-pm': { 
                        name: '商业产品经理 AI', 
                        icon: '💼', 
                        avatar: '../employees/icons/商业产品经理形象.png',
                        status: '在线 - 市场分析' 
                    },
                    'software-pm': { 
                        name: '软件产品经理 AI', 
                        icon: '📱', 
                        avatar: '../employees/icons/软件产品经理形象.png',
                        status: '在线 - 需求梳理' 
                    },
                    'designer': { 
                        name: '界面设计师 AI', 
                        icon: '🎨', 
                        avatar: '../employees/icons/界面设计师形象.png',
                        status: '在线 - 创作中' 
                    },
                    'architect': { 
                        name: '系统架构师 AI', 
                        icon: '🏗️', 
                        avatar: '../employees/icons/系统架构师形象.png',
                        status: '在线 - 架构设计' 
                    },
                    'frontend': { 
                        name: '前端开发工程师 AI', 
                        icon: '💻', 
                        avatar: '../employees/icons/前端开发工程师形象.png',
                        status: '忙碌 - 编码中' 
                    },
                    'backend': { 
                        name: '后端开发工程师 AI', 
                        icon: '🔧', 
                        avatar: '../employees/icons/后端开发工程师形象.png',
                        status: '在线 - 开发API' 
                    },
                    'ai-engineer': { 
                        name: 'AI开发工程师 AI', 
                        icon: '🤖', 
                        avatar: '../employees/icons/AI开发工程师形象.png',
                        status: '在线 - 模型训练' 
                    },
                    'db-engineer': { 
                        name: '数据库工程师 AI', 
                        icon: '�️', 
                        status: '在线 - 数据优化' 
                    },
                    'tester': { 
                        name: '系统测试员 AI', 
                        icon: '�🔍', 
                        status: '离线 - 准备测试' 
                    },
                    'version-manager': { 
                        name: '版本管理员 AI', 
                        icon: '📦', 
                        status: '在线 - 版本控制' 
                    }
                };
                return roles[roleId] || { name: '未知角色', icon: '🤖', avatar: '../employees/icons/default.png', status: '状态未知' };
            }

            selectFile(fileItem) {
                // 移除之前的选中状态
                document.querySelectorAll('.tree-item').forEach(item => {
                    item.style.backgroundColor = '';
                });
                
                // 选中当前文件
                fileItem.style.backgroundColor = 'var(--md-sys-color-primary-container)';
                
                // 更新编辑器头部
                const fileName = fileItem.textContent.trim();
                document.querySelector('.file-path').textContent = `src/components/${fileName}`;
            }
        }

        // 初始化应用
        document.addEventListener('DOMContentLoaded', () => {
            new SynapseTeamApp();
        });
    </script>
</body>
</html>
